<template>
  <transition name="wd-dialouge-fade">
      <div class="wd-dialouge-appear" v-show ='visible' @click.self="close">
        <div class="wd-dialouge-wrap" :style="{width: width, marginTop: top}">
          <div class="wd-dialouge-head">
            <slot name='title'>
              <span>{{title}}</span>
            </slot>
            <span id="del" @click.self="close">X</span>
          </div>
          <div class="wd-dialouge-body">
            <slot></slot>
          </div>
          <div class="wd-dialouge-footer" v-if="$slots.footer">
            <div><slot name="footer"></slot></div>
          </div>
        </div>
      </div>
  </transition>
</template>

<script>

export default {
  name: 'WdDialouge',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '30%'
    },
    top: {
      type: String,
      default: '15vh'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang=scss scope>
  * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -moz-user-select: none;
  }
  .wd-dialouge-appear {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.3);
    .wd-dialouge-wrap {
    width: 30%;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0,0,0,.5);
    border-radius: 10px;
    margin: 15vh auto 50px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .wd-dialouge-head {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    #del {
      cursor: pointer;
    }
  }
  .wd-dialouge-body {
    flex: 2;
    font-size: 20px;
    text-indent: 2rem;
  }
  .wd-dialouge-footer {
    margin-top: 30px;
    overflow: hidden;
    margin-bottom: 10px;
    div {
      float: right;
      .wd-button {
         margin-right: 10px;
      }
    }
  }
  }

  /* 给对话框加点动画效果 */
  .wd-dialouge-fade-enter-active {
    animation: fade .5s;
  }
  .wd-dialouge-fade-leave-active {
    animation: fade .5s reverse;
  }
  @keyframes fade {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>
